﻿<template>
  <swiper :options="swiperOption" class="swiper_btn">
    <swiper-slide v-for="slide in swiperSlides">
		<div class="wrap_img">
			<img v-bind:src="slide.img"/>
		</div>
	</swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  import { Toast, Indicator } from 'mint-ui';
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import common from "../../common/common.js"
  export default {
    name: 'carrousel1',
    data() {
      return {
        swiperOption: {
          autoplay: 3500,
          setWrapperSize :true,
          pagination : '.swiper-pagination',
          paginationClickable :true,
          mousewheelControl : true,
          observeParents: true,
        },
        swiperSlides: [],
        get_img_base: "",
        banner_data:"",
        base_url:""
      }
    },
    props: [
      'childMsg'
    ],
    mounted() {
      this.banner_data = this.$store.getters.get_header_scroll_nav;
      let get_img_base = this.$store.getters.get_img_base;
      this.get_img_base = get_img_base;
      let id = sessionStorage.getItem("off_post_id");
      this.is_app=common.is_app(this);
      //setInterval(() => {
      //  //console.log('simulate async data11')
      //  let swiperSlides = this.swiperSlides
      //  if (swiperSlides.length < images.length) swiperSlides.push(swiperSlides.length + 1)
      //}, 3000)
      try{
        this.$http.get(this.base_url+'yizhiweimen/api/user/tokenExchange/getOfficialpostById?id=' + id)
          .catch((thrown) => {
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
      }).then((e) => {
          console.log(e)

        if (e.data == "" || e.data == null || e.data== undefined) {
          return;
        }
        //images 用 ， 隔开 卧槽
        let images = e.data.images.split(",");
        let list = [];
        let add_base = {};
        for (let x = 0; x < images.length; x++) {
          list.push({
            img: get_img_base + images[x]
          })
        }
        e.data.images = images
        this.swiperSlides = list
        setInterval(() => {
          //console.log('simulate async data11')
          let swiperSlides = this.swiperSlides
          if (swiperSlides.length < images.length) swiperSlides.push(swiperSlides.length + 1)
      }, 3000)
      })
      }catch(e){
          console.log(e)
      }



      },
    components: {
      swiper,
      swiperSlide
    }

  }
</script>
<style scoped>
  .top_nav_Scroll{
    height:13rem;
  }
  .wrap_img {
    width: 100%;
  }
  .wrap_img img{
      width:100%;
      display:block;
  }
  .wrap_img_dot {

  }
  .mar_top_1 {
    margin-top: 0.3rem
  }
  .wrap_img_box_last_list {
    color: #9f5c2f;
    line-height: 1;
    font-size: 0.4rem;
    display: flex;
    padding-left:4%;
    padding-right:4%;
    justify-content:space-between;
  }
  .wrap_img_box_list {
    color: #9f9f9f;
    font-size: 0.5rem;
    padding-left: 4%;
    text-align: left;
    line-height: 1.2;
  }
  .wrap_img_box_name {
    font-size: 0.5rem;
    margin-top: 0.575rem;
    margin-bottom: 0.35rem;
    line-height: 1;
    font-weight: 600;
    text-align: left;
    padding-left: 5%;
  }
  .swiper-button-prev {
    user-select: none;
    width: 4.5vw;
    background-size: contain;
    background-image: url("../../../static/img/nav_scroll/nav_left.png");
  }
  .swiper-button-next {
    user-select:none;
    width: 4.5vw;
    background-size: contain;
    background-image: url("../../../static/img/nav_scroll/nav_right.png");
  }
  .swiper_btn {
    width: 100%;
    height: 12.85rem;
  }
  .wrap_img {
    width: 100%;
    height: 12.85rem;
    display: flex;
    justify-content: space-between;
  }
  .wrap_img_box{
		width:35vw;
		height:8.2rem;
		background-color:#fff;
		box-shadow:0 0 8px 2px rgba(181, 175, 175, 0.4);
		border-radius:1vw;
  }
  .wrap_img_box img{
    display:block;
    width:100%;
    height:4.2rem;
  }
</style>
